
<template>
  <div class="list">
    <div class="item" v-for="(item, index) in list" :key="index">
      <router-link
        class="link"
        :to="{
          name: 'detail',
          params: { id: item._id },
          query: { title: item.title },
        }"
      >
        <div class="item-box">
          <div class="line">
            <div class="name center">
              <van-icon name="user-o" /> {{ item.author.username }}
            </div>
            <div
              class="date center"
              :style="{ color: type == 2 ? 'red' : '#999' }"
            >
              <span>发布时间:{{ item.time | timeFormat(true) }}</span>
            </div>
          </div>
          <div class="title mt5 row">
            <van-icon name="fire" color="red" class="icon"></van-icon>
            <span :style="{ color: type == 1 ? 'red' : '#999' }">{{
              item.hot
            }}</span>
          </div>
          <div class="title mt5 row">
            <van-icon name="label-o" class="icon"></van-icon>
            <span>{{ item.title }}</span>
          </div>
          <div class="title mt5 row">
            <van-icon name="clock-o" class="icon"></van-icon>
            <span>{{ item.date | timeFormat(false) }}</span>
          </div>
          <div class="campany mt5 row">
            <van-icon name="cashier-o" class="icon"></van-icon>
            <span>{{ item.campany }}</span>
          </div>
          <div class="address mt5 row">
            <van-icon name="location-o" class="icon"></van-icon>
            <span>{{ item.address }}</span>
          </div>
          <div class="level mt5 row">
            <van-icon name="chart-trending-o " class="icon"></van-icon>
            <van-tag
              size="large"
              :color="colors[loda.findIndex(levels, (v) => v == item.level)]"
            >
              {{ item.level }}
            </van-tag>
          </div>
          <div class="tags mt5 row" v-if="item.tags.length > 0">
            <p>面试标签:</p>
            <div class="mt5">
              <van-tag
                class="tag"
                size="large"
                round
                type="success"
                v-for="(val, index) in item.tags"
              >
                {{ val.value }}
              </van-tag>
            </div>
          </div>
          <div class="imgs mt5 row">
            <p>面试图片:</p>
            <div class="mt5" v-if="item.imgs[0].url">
              <img
                class="bigimg"
                v-lazy="item.imgs[0].url.replace(/public/, baseURL)"
                alt=""
              />
            </div>
          </div>
          <div class="actions mt10 row">
            <div class="cit">
              <van-icon name="like-o" /> <span>{{ item.likes }}</span>
            </div>
            <div class="cit">
              <van-icon name="star-o" /> <span>{{ item.collects }}</span>
            </div>
            <div class="cit">
              <van-icon name="comment-o" /> <span>{{ item.pings }}</span>
            </div>
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  props: ["list", "type"],
  data() {
    return {};
  },
  methods: {},
  mounted() {},
};
</script>

<style lang="scss" scoped >
.title,
.campany,
.address {
  color: #000;
  font-size: 16px;
  font-weight: 500;
}
.audio {
  background: #fff;
  padding: 8px;
  display: flex;
  justify-content: center;
}
.actions {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-top: 10px;
}
.imgs {
  .sbox {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .simg {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    margin: 0px 10px 10px 0;
  }
  .bigimg {
    width: 100%;
    height: 300px;
    border-radius: 10px;
  }
}
.tag {
  margin: 3px 3px 0 0;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.list {
  padding: 15px 15px;
  background: #f4f4f4;
  .item {
    margin-top: 20px;
    background: #fff;
    border-radius: 10px;
    padding: 10px;

    .link {
      color: #666;
      .line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 0.5px solid #ddd;
        padding-bottom: 5px;
      }
      .name {
        font-weight: 600;
      }
      .row {
        .icon {
          margin-right: 4px;
        }
      }
    }
  }
}
</style>
